
<template>
  <div class="col-md-10" style="margin:auto">
    <form class="form-horizontal" role="form">
      <div class="upload form-group"  onclick="document.getElementById('file-upload').click()" >
        <p>
          <h1>简历上传</h1>
        </p>
        <!-- <input type="file" class="upload"> -->
        <input type="file" id="file-upload" class="file-upload" ref="myfile" accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/jpeg,application/pdf">
        <!-- image/* -->
        <!-- "application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/jpeg,application/pdf" -->
      </div>
      <br>
      <br>
      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-12 text-center">
          <button type="button" @click="handlesubmit" class="btn-primary col-sm-4" style="font-size: 25px">提交简历</button>
          <button type="button" class="btn-primary col-sm-4" @click="jilu" style="font-size: 25px">提交记录</button>
        </div>
      </div>
    </form>
  </div>
</template>

<style scoped>

.yonghu-1 img{
  height: 200px;
  width: 200px;
}
.row div{
  padding-left: 0;
  padding-right: 0;
}
.row hr{
  width: 100%;
  color:black
}

.row ul{
  width: 120px;
  height: 300px;
  /* background-color: rgba(240, 255, 248, 0.747); */
  margin: 0;
  padding: 0;
  /* background-color: rgba(240, 255, 248, 0.747); */

}

.row ul li{
  height: 60px;
  /* width: 104px; */
  margin: auto;
  color: #000;
  text-align: center;
}

a{
  height: 50px;
  text-align: center;
  line-height: 60px;
}
a i{
  font-size: 35px;
  /* line-height: 60px; */
  /* height: 50px; */
  /* text-align: center; */
}
a i p{
  /* line-height: 350px; */
  font-size: 20px;
  color: black;
  font-weight: bolder;
  font-style: normal;
  text-align: center;
}
p h1{
  margin-top: 50px;
}

.font-top p{
  padding-top: 20px;
  line-height: 120px;
}
.upload{
  height: 350px;
  background-color: rgba(255,255,255, 0.363);
  margin-top: 50px;
  border-radius: 50px;
  text-align: center;
  padding-top: 100px;
  backdrop-filter: blur(3px);
  box-shadow:inset 0 0 20px rgba(255, 255, 255, 0.5);
}
.file-upload {
  display: none;
}
button{
  /* background-color: blue; */
  margin-left: 40px;
  margin-right: 40px;
  height: 50px;
  border-radius: 10px;
}

</style>

<script>
import axios from 'axios';
import router from '@/router/index.js';
import { mapMutations } from 'vuex'
export default{
  data(){
    return {file:''}
  },
  methods:{
    ...mapMutations(['update','updatadata']),
    handlesubmit(){
     let myfile=this.$refs.myfile;//dom对象
     console.log("myfile:", myfile);
     let files = myfile.files
     console.log(files);
     let file = files[0];
     console.log(file);
     //console.log("filename:",file.name);
     //let filename='';
     //filename=filename+file.name
     //var houzui=filename.split('.')
     //console.log(houzui[houzui.length-1]);
    //  if(houzui=="docx" or houzui=="pdf" houzui=="")
    let formData = new FormData();
    formData.append("uploadFile", file);
    formData.append("user_name",localStorage.getItem("username"))
    console.log(formData);
// http://127.0.0.1:5000/upload
// http://26.188.105.114:5000/upload
// http://127.0.0.1:5000/testqq
    axios.post('http://127.0.0.1:5000/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}})
                    .then(res => {
                        console.log(res.data);
                        if(res.data=="分析失败"){
                          alert("文件解析失败请重新上传");
                          router.push({ name: 'resumeUpload' })
                        }else{
                          // router.push({ name: 'analysis' })
                          console.log(res);
                          console.log(res.data.姓名);
                          console.log(res.data.性别);
                          this.update(res.data.姓名,res.data.性别,res.data.期望从事行业,res.data.期望工作地区,res.data.期望月薪,res.data.毕业院校,res.data.生日)
                          this.updatadata(res.data)
                          alert("文件上传成功,解析完成")
                          router.push({ name: 'analysis' })
                        }                      
                    })
    },
    jilu(){
      const username={'username':localStorage.getItem("username")}
      axios.post('http://127.0.0.1:5000/log',username).then(res=>{
        console.log(res.data);
        localStorage.setItem('jiludata',JSON.stringify(res.data))
      })
      router.push({name:'jilu'})

    }
  }
}
</script>